<!-- 商品详情页，多个页面共用的组件 -->

<script setup lang="ts">
    import { ref, inject, watch, provide } from 'vue' //导入vue函数
    import { useCart } from '@/stores/cart' //导入cart状态文件
    import { ElMessage } from 'element-plus' //导入消息框
    import CartPay from '@/views/Cart/components/CartPay.vue' //引入自定义组件 - 支付界面

    //执行方法获得cartStore对象
    const cartStore = useCart()

    //商品详情信息
    const props = defineProps(["item"]);

    //通过依赖注入，共享父组件中的响应数据对象
    const isShow = inject("isShowDetails") //dialog是否显示

    //当前商品数量
    const goodsCount = ref(1)

    //当前商品总价
    const currentTotalPrice = ref(0)

    //是否显示支付界面
    const isShowPay = ref(false)
    //通过provide实现跨组件通信
    provide("isShowPay", isShowPay) //支付组件是否显示

    //Dialog打开的回调函数
    function initGoods(){
        goodsCount.value = props.item.num
    }

    //改变商品数量
    function changeGoodsNum(){
        //计算当前商品总价
        currentTotalPrice.value = props.item.discount*props.item.price*goodsCount.value
    }

    //加入购物车的事件处理
    function addCart(){
        //设置商品信息
        const goods = {
            id: props.item.id,
            category_id: props.item.category_id,
            name: props.item.name,
            price: props.item.price,
            picture: props.item.picture,
            stock: props.item.stock,
            spec: props.item.spec,
            description: props.item.description,
            discount: props.item.discount,
            num: goodsCount.value
        }
        //添加购物车
        cartStore.addCart(goods)
        //提示信息
        ElMessage({type:"success", message:"已加入购物车"})
    }

    //立即购买
    function buyNow(){
        //显示支付界面
        isShowPay.value = true
    }

    //侦听props变化
    watch(props,()=>{
        //props发生变化时，获得商品默认数量及总价
        goodsCount.value = props.item.num
        currentTotalPrice.value = props.item.discount*props.item.price*goodsCount.value
    })
</script>

<template>
    <el-dialog v-model="isShow" title="商品详情" width="800" @open="initGoods">
        <!--显示内容-->
        <div class="goods">
            <div><img :src="props.item.picture" /></div>
            <div>
                <div>
                    <el-descriptions :column="1" border label-width="100">
                        <el-descriptions-item label="商品名称">{{ props.item.name }}</el-descriptions-item>
                        <!--注：replace用于过滤HTML代码-->
                        <el-descriptions-item label="商品描述">{{ props.item.description.replace(/<\/?[^>]+(>|$)/g, "") }}</el-descriptions-item>
                        <el-descriptions-item label="商品价格"><span class="price">￥{{ (props.item.discount * props.item.price).toFixed(2) }}</span><span class="discount" v-if="props.item.discount != 1">￥{{ props.item.price }}</span></el-descriptions-item>
                        <el-descriptions-item label="商品库存">{{ props.item.stock }}</el-descriptions-item>
                        <el-descriptions-item label="数量">
                            <el-input-number v-model="goodsCount" :min="1" :max="props.item.stock" @change="changeGoodsNum"></el-input-number>
                        </el-descriptions-item>
                        <el-descriptions-item label="总价">￥{{ currentTotalPrice.toFixed(2) }}</el-descriptions-item>
                    </el-descriptions>
                </div>
                <div>
                    <el-button size="large" @click="addCart">加入购物车</el-button>
                    <el-button type="primary" size="large" @click="buyNow">立即购买</el-button>
                </div>
            </div>
        </div>
    </el-dialog>

    <!--自定义组件 - 支付界面-->
    <CartPay :orderPrice="currentTotalPrice"></CartPay>

</template>

<style scoped>
    .goods{
        width:100%;
        display:flex;
        justify-content:space-between;
    }
    .goods img{
        width:310px;
        height:310px;
        border-radius: 5px;
    }
    .goods > div:first-child{
        display:flex;
        justify-content: center;
        align-items: center;
        width:350px;
    }
    .goods > div:last-child{
        width:400px;
    }
    .goods > div:last-child .el-descriptions{
        margin:0px;
    }
    .goods > div:last-child > div:last-child{
        margin-top:20px;
        display:flex;
        justify-content: space-between;
    }
    .goods > div:last-child > div:last-child .el-button{
        width:180px;
    }
    .goods .price{
        color:#CF4444;
        font-weight: bold;
        font-size:20px;
    }
    .goods .discount{
        color:#999999;
        text-decoration: line-through;
        margin-left:5px;
        font-size:13px;
    }
    :deep(.el-descriptions__label){
        font-weight: normal !important;
    }
</style>
